<script setup>
import { ref, nextTick } from "vue";
import {useRightMenuStore} from "@/stores/rightMenu.js";

const isEditing = ref(false);
const inputText = ref("");
const inputRef = ref(null);

const startEditing = () => {
  isEditing.value = true;
  nextTick(() => {
    inputRef.value.focus(); // 自动聚焦输入框
  });
};

const handleEnter = () => {
  console.log("输入的内容:", inputText.value);
  useRightMenuStore().openDirectory(inputText.value)
  // 在这里执行你的操作，比如提交数据
  isEditing.value = false;
  inputText.value = "";
};
</script>

<template>
  <div style="user-select: none;" v-if="!isEditing" @click="startEditing">
    <<<
  </div>
  <el-input
      v-else
      ref="inputRef"
      v-model="inputText"
      @keyup.enter="handleEnter"
      @blur="isEditing = false"
      placeholder="跳转路径"
  />
</template>

<style scoped>

</style>